<template>
  <Form v-slot="{ errors }">
    <h2>表单校验错误是的对象 {{ errors }}</h2>
    用户名：
    <!-- 💥注意实现：Field 必须指定 name 属性，不指定会报错 -->
    <Field class="ipt" name="username" :rules="username" type="text" />
    <br />
    密码：<Field class="ipt" name="password" type="text" />
  </Form>
</template>

<script>
import { Field, Form } from 'vee-validate'
export default {
  components: { Field, Form },
  setup () {
    const username = (value) => {
      // console.log(value)
      // 注意：只要返回的不是 true，都会出现在 errors 错误对象中
      if (!value) return '请输入用户名'
      if (!/^[a-zA-Z]\w{3,10}/.test(value)) return '用户名必须字母开头，长度是4-11'
      // 返回 true 表示校验通过
      return true
    }
    return { username }
  }
}
</script>

<style lang="less" scoped>
.ipt {
  border: 1px solid #000;
}
</style>
